<template>
  <div>
    <div style="margin: 20px ; font-size: 12px">
      <van-row :gutter="30">
        <van-col :span="6" style="background-color: #f2f2f2">
          <van-image
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ec65803d049f8d68b6a092fb051590a.png"></van-image>
        </van-col>
        <van-col :span="18">
          <div class="product-desc">
            <p class="price">￥{{ price }}<span class="old">￥{{ oldPrice }}</span></p>
            <div class="van-ellipsis name">{{productName}} {{versionArr[productChoose.version]}} {{colorArr[productChoose.color]}}
            </div>
          </div>
        </van-col>
      </van-row>
      <van-row>
        <!--版本选择-->
        <p style="font-size: 14px"><b>版本</b></p>
        <van-radio-group v-model="productChoose.version" @change="versionChange(productChoose.version)" direction="horizontal">
          <van-radio icon-size="15px" checked-color="#ff6700" v-for="(item,index) in versionArr" :key="index" :name="index">
            {{ item }}
          </van-radio>

        </van-radio-group>
        <!--颜色选择-->
        <p style="font-size: 14px"><b>颜色</b></p>
        <van-radio-group v-model="productChoose.color" @change="colorChange(productChoose.color)" direction="horizontal">
          <van-radio icon-size="15px" checked-color="#ff6700" v-for="(item,index) in colorArr" :key="index" :name="index">
            {{item}}
          </van-radio>

        </van-radio-group>
        <!--购买数量-->
        <van-row style="margin-top: 10px">
          <van-col :span="12"><p style="margin:0; font-size: 14px; line-height: 28px"><b>购买数量</b></p></van-col>
          <van-col :span="12" style="text-align: right;">
            <van-stepper v-model="count" min="1" max="2"/>
          </van-col>
        </van-row>

        <!-- 提交按钮-->
        <van-row :gutter="30" style="margin-top: 20px">
          <van-col :span="12">
            <van-button round color="#ff6700" size="small" style="width: 100%">加入购物车</van-button>
          </van-col>
          <van-col :span="12">
            <van-button round color="#ff6700" size="small" style="width: 100%">立即购买</van-button>
          </van-col>
        </van-row>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductSkuCode",
  props: {
    productName: '',

  },
  data() {
    return {
      price: 2954,
      oldPrice: 3954,
      version:'',
      color:'',

      versionArr: ['8GB+128GB', '12GB+128GB', '12GB+256GB'],
      colorArr: ['银翼', '暗影', '冰斩'],
      count: '1',

      productChoose:{
        version:0,
        color:0
      }
    }
  },

  methods: {
    versionChange(){
      this.price = this.versionArr[this.productChoose.version];
      this.version = this.versionArr[index];
      this.priceSubToFather();
    },
    colorChange(index){
      this.oldPrice = this.colorArr[this.productChoose.color];
      this.color = this.colorArr[index];
      this.priceSubToFather();
    },
    priceSubToFather() {
      this.$emit('priceSubToFather',
          {price: this.price,
            oldPrice: this.oldPrice,
            version:this.version,
            color:this.color,
            })
    },
  }
}
</script>

<style scoped>

.product-desc {
  margin: 0;
  padding-top: 10px;
  text-align: left;
}

.product-desc .price {
  margin: 0;
  padding: 0;
  color: orangered;
  font-size: 22px;
  line-height: 22px;
  font-weight: bold;
}

.product-desc .price .old {
  color: #999999;
  font-size: 14px;
  text-decoration: line-through;
}

.product-desc .name {
  margin-top: 10px;
  font-size: 12px;
}
</style>